<template>
  <div class="mention">
    <header-bar :text="title" :left="left"></header-bar>
  <div class="m_content">
    <div class="mc_select">
      <div>地址</div>
      <input type="text" placeholder="请输入地址">      
    </div>
    
    <div class="kmention">
      <div>可提取{{money}}</div>
      <div class="mc_ye">
        <input type="text" placeholder="请输入提币数量" v-model="count">
      <button @click="allChange">全部提取</button>
      </div>
    </div>
  </div>
  <button class="m_sub" @click="postmoney(count)">确认提币</button>
  <div class="m_f">
    <p>友情提示</p>
    <p>1、提币原路返回</p>
  </div>
  <div class="pay-bg" v-if="flag">
        <div class="pay-tool">
            <div class="pay-tool-title border-bottom">
            <span  @click="backHandle()" class="iconfont icon-zuo"></span><strong>请输入交易密码</strong>
            </div>
            <div class="pay-tool-content">
            <div class="pay-tool-inputs">
                <div class="item" v-for="(i,key) in items" :key="key"><span class="icon_dot" v-if="password[i]"></span></div>
            </div>
            </div>
            <div class="pay-tool-keyboard">
            <ul>
                <li @click="keyUpHandle($event)" v-for="(val,key) in keys" :key="key">
                {{ val }}
                </li>
                <li class="del" @click="delHandle"><span class="icon-del" style="font-size:14px">回退</span></li>
            </ul>
        </div>
     </div>
   </div>
   <mt-popup
        v-model="popupVisible">
        <div class="m_fade">
          <div class="mf_h">选择提币类型</div>
        <ul>
          <li>BTC</li>
          <li>EOS</li>
          <li>ETH</li>
        </ul>
        </div>
      </mt-popup>
  </div>
</template>
<script>
import headerBar from "./main/header";
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0];
import { Header, Popup, MessageBox, Toast } from "mint-ui";
import { userInfo, withdraw } from "../api/api.js";
export default {
  name: "Mention",
  data() {
    return {
      msg: "",
      popupVisible: false,
      popup: "BTC",
      money: 0,
      placeholder: "",
      count: "",
      id: "",
      phone: "",
      status: "",
      userstatus: "",
      items: [0, 1, 2, 3, 4, 5],
      keys: keys(),
      password: [],
      flag: false,
      code:"",
      title: "提取",
      left: {
        status: true
      }
    };
  },
  components: {
    headerBar
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    backHandle() {
      this.flag = false;
    },
    keyUpHandle(e) {
      let text = e.currentTarget.innerText;
      let len = this.password.length;
      if (!text || len >= 6) return;
      this.password.push(text);
      this.ajaxData();
    },
    delHandle() {
      if (this.password.length <= 0) return false;
      this.password.shift();
    },
    ajaxData() {
      if (this.userstatus == 1) {
        MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
          this.$router.push({ path: "/certification?status=1" });
        });
      } else if (this.userstatus == 3) {
        MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
          this.$router.push({ path: "/certification?status=3" });
        });
      } else if (this.status == 1) {
        this.password = [];
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({ path: "/pay/" + this.mobilephone });
          }
        );
      }
      if (this.status == 2 && this.userstatus == 2) {
        if (this.password.length >= 6) {
          this.getwithdraw(
            parseInt(this.password.join(" ").replace(/\s/g, ""))
          );
        }
      }
      return false;
    },
    selectMoney: function() {
      this.popupVisible = true;
      this.count = "";
    },
    postmoney(cod) {
      if (this.userstatus == 1) {
        MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
          this.$router.push({ path: "/certification?status=1" });
        });
      } else if (this.userstatus == 3) {
        MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
          this.$router.push({ path: "/certification?status=3" });
        });
      } else if (this.status == 1) {
        this.password = [];
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({ path: "/pay/" + this.mobilephone });
          }
        );
      }
      if (cod) {
        if (this.count <= 0) {
          Toast({
            message: "提币额度必须大于0",
            position: "bottom",
            duration: 5000
          });
          return;
        }
        if (this.count <= this.money) {
          this.flag = true;
          this.password = [];
        } else {
          this.count = "";
          this.flag = false;
          this.password = [];
          MessageBox.confirm("您的余额不足，先去充币？").then(action => {
            this.$router.push({ path: "/charge/" + this.id });
          });
        }
      } else {
        Toast({
          message: "请先输入提币额度",
          position: "bottom",
          duration: 5000
        });
      }
    },
    allChange() {
      this.count = this.money;
    },
    getuser() {
      let para = {
        id: this.id,
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : ""
      };
      userInfo(para)
        .then(res => {
          if (this.popup == "BTC") {
            this.money = res.data.btcValue;
          } else if (this.popup == "ETH") {
            this.money = res.data.ethValue;
          } else if (this.popup == "EOS") {
            this.money = res.data.eosValue;
          }
          // console.log(res);
          this.placeholder = "可转出余额" + this.money;
          this.status = res.data.statusPay;
          this.userstatus = res.data.status;
          if (res.data.status == 1) {
            MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
              this.$router.push({ path: "/certification?status=1" });
            });
          } else if (res.data.status == 3) {
            MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
              this.$router.push({ path: "/certification?status=3" });
            });
          } else if (res.data.statusPay == 1) {
            this.flag = false;
            this.phone = res.data.mobilephone;
            MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
              action => {
                this.$router.push({ path: "/pay/" + res.data.mobilephone });
              }
            );
          }
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    getwithdraw(h) {
      // console.log(this.flag);
      if (this.flag) {
        let para = {
          id: this.id,
          token: sessionStorage.getItem("token")
            ? JSON.parse(sessionStorage.getItem("token"))
            : "",
          coinType: this.popup,
          quantity: this.count,
          payPwd: h
        };
        withdraw(para)
          .then(res => {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
            this.password = [];
            if (res.code == 200) {
              this.flag = false;
              this.count = "";
            }
          })
          .catch(err => {
            Toast({
              message: "请求超时",
              position: "bottom",
              duration: 5000
            });
          });
      } else {
        this.password = [];
        this.flag = false;
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({ path: "/pay/" + this.phone });
          }
        );
      }
    }
  },
  mounted() {
    this.code = this.$route.query.code;
    this.title="提取"+this.code;
    this.money=this.$route.query.value;
    // console.log(this.code)
    // this.getuser();
    // var mFade = document.getElementsByClassName("m_fade")[0];
    // var oLi = mFade.getElementsByTagName("li");
    // var that = this;
    // for (let i = 0; i < oLi.length; i++) {
    //   oLi[i].onclick = function() {
    //     that.popupVisible = false;
    //     that.getuser();
    //     that.popup = this.innerHTML;
    //   };
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/mention.css");
@import url("../../static/css/pay.css");
</style>
